<template>
	<div class="uni-flex uni-row maininfo">
		<div class="flex-item " :style="{'width':100/menunum+'%'}" v-for="(item,index) in menuObj" :key="index" v-if="menuObj!=''" @click="domenu(item)">
			<image :src='item.iconUrl' mode="widthFix" lazy-load class="imageicon"></image>
			<text>{{item.menuName}}</text>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'menu-item',
		data() {
			return {

			};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			menunum: {
				type: Number,
				default: 5
			},
			menuObj: {
				type: Array,
				default: {}
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			},
			onSwitchChange(e) {
				this.$emit('switchChange', e.detail)
			},
			domenu(item){
				this.$emit('domenu',item)
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
	.maininfo {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx;
	}

	.flex-item {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.imageicon {
		width: 90upx;
		height: 90upx;
		padding: 20upx 20upx 0 20upx;
	}
</style>
